<template>
    <customizePickerVue :pickerValue.sync="pickerValue" :picker-column="pickerColumn" @bindChange="changePicker"/>
</template>

<script>
    import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';

    export default {
        props: {
            value: [Number,String],
            selectList: {
                type: Array,
                default: () => []
            },
        },
        components: {
            customizePickerVue,
        },
        data() {
            return {
                newVal: '',
                pickerValue: [],
                pickerColumn: [
                    {
                        suffix: '以上',
                        key: 'y',
                        listKey: 'y',
                        list: [],
                    },
                ]
            };
        },
        watch: {
            selectList: {
                handler(val){
                    this.initPickerColumn();
                },
                deep: !0,
                immediate: !0,
            },
            value: {
                handler(val){
                    console.log(val);
                    if (this.newVal !== val) {
                        this.newVal = val;
                        this.initPickerValue();
                    }
                },
                immediate: !0,
            }
        },
        computed: {
        },
        mounted(){
            this.initPickerColumn();
        },
        methods: {
            changeShow(){
                this.$emit('update:show',this.newShow);
                this.$emit('changeShow', this.newShow);
            },
            generateSequence(count,initial = 0) {
                const init = Number(initial);
                return [...Array(count).keys()].map(i => {
                    const num = i + init;
                    const str = num < 10 ? `0${num}` : `${num}`;
                    return str;
                });
            },
            initPickerColumn(){
                const list = this.selectList.map(v => v.valueName);
                this.pickerColumn.forEach(v => {
                    v.list = list;
                })
                this.initPickerValue();
            },
            initPickerValue(){
                const lists = [];
                this.pickerColumn.forEach((v,i) => {
                    const index = v.list.findIndex(item => String(item) === String(this.newVal));
                    lists.push(index > -1 ? index : v.list.length - 21);
                })
                this.pickerValue = lists;
            },
            resetTime(){
            },
            endChange(){
            },
			changePicker(){
				const temVal = [];
				this.pickerValue.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					temVal.push(str);
				});
                const val = temVal.join(',');
                this.$emit('update:value', val);
                this.$emit('changePicker', val);
			},
        }
    }
</script>

<style lang="less" scoped>
</style>
